import './css/index.css';
import ajaxFn from './js/ajax';
// 发送请求, 实现动态渲染图片
ajaxFn({
  baseUrl: 'http://101.133.238.131:7001',
  url: '/api/web/carouselGroup/getAllCarouselGroup',
  method: 'GET',
  data: {
    projectId: 6,
  },
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  callback: (res) => {
    // 所有操作都是在异步中执行
    if (res.code === 200) {
      let carousels = res.data.rows[0].w_carousels;
      console.log(carousels);
      // 初始化轮播图
      init(carousels);
      // 执行轮播图操作
      eventFn();
    } else {
      console.log('出现了其他问题');
    }
  },
});

// 初始化渲染
function init(data) {
  let ul = document.querySelector('.img-box > ul');
  let dotBox = document.querySelector('.dot-box');

  // innerHTML
  let liHTML = '';
  let spanHTML = '';
  data.forEach((item) => {
    liHTML += `<li><img src="${item.url}" /></li>`;
    spanHTML += '<span></span>';
  });
  // 一次性写入
  ul.innerHTML = liHTML;
  dotBox.innerHTML = spanHTML;
  // 添加激活类名 (第一个元素)
  ul.firstElementChild.classList.add('li-active');
  dotBox.firstElementChild.classList.add('dot-active');
}

// 轮播图操作
function eventFn() {
  let arrowLeft = document.querySelector('.arrow-left');
  let arrowRight = document.querySelector('.arrow-right');
  let dots = document.querySelectorAll('.dot-box > span');
  let list = document.querySelectorAll('.img-box > ul > li');
  let box = document.querySelector('.box');

  let timer;
  // 每次点击的时候需要记录当前是第几张 (记录下标)
  let index = 0;
  // list[0] ---> 第一个li元素
  // 保存上一次的操作下标 (移除上一次的类名)
  let lastIndex = 0;
  arrowRight.addEventListener('click', arrowRightFn);
  arrowLeft.addEventListener('click', arrowLeftFn);

  // 下一张函数
  function arrowRightFn() {
    console.log('下一张');
    // ul里面展示的图片切换功能, 每一个li包含不同的img, li[下一张下标]实现切换
    index++;
    // 判断index是否超出li集合的长度, 如果超出回到第一个li
    if (index >= list.length) {
      index = 0;
    }

    // ++index >= list.length && (index = 0); // 短路运算
    changeActive();
  }

  // 上一张函数
  function arrowLeftFn() {
    console.log('上一张');

    // 切换index, 如果是第一张, 上一张为最后一张
    index--;
    if (index < 0) {
      index = list.length - 1;
    }

    // --index < 0 && (index = list.length - 1) // 短路运算
    changeActive();
  }

  // 小圆点的点击事件
  dots.forEach((el, elIndex) => {
    el.addEventListener('click', () => {
      // 获取当前点击的小圆点下标, 更换index的值就就可以实现轮播图和小圆点下标一致
      index = elIndex;
      // 更改激活类名
      changeActive();
    });
  });

  // changeActive 函数, 主要功能是修改激活类名

  function changeActive() {
    // 先移除上一张li的激活类名 li-active (当前激活对象更换了)
    list[lastIndex].classList.remove('li-active');
    // 小圆点的激活类
    dots[lastIndex].classList.remove('dot-active');

    // 更换激活对象
    list[index].classList.add('li-active');
    dots[index].classList.add('dot-active');

    // 更新上一次的值lastIndex
    lastIndex = index;
  }

  // 自动轮播
  autoPlay();
  function autoPlay() {
    // 停止上一个定时器任务 (解决切换屏幕的bug)
    clearInterval(timer);
    timer = setInterval(() => {
      // 下一张函数
      arrowRightFn();
    }, 3000);
  }

  // 停止自动轮播 (鼠标移入轮播图范围之内)
  box.addEventListener('mouseenter', () => {
    clearInterval(timer);
  });

  // 继续开始轮播 (鼠标移出轮播图范围)
  box.addEventListener('mouseleave', () => {
    autoPlay();
  });

  // visibilityChange 功能: 浏览器标签页被隐藏/显示的时候触发该事件

  document.addEventListener('visibilitychange', () => {
    // document.hidden 检测文档是否为隐藏
    // document.visibilityState

    // console.log('hidden', document.hidden);
    // console.log('visibilityState', document.visibilityState);

    if (document.hidden) {
      clearInterval(timer);
      console.log('隐藏');
    } else {
      autoPlay();
      console.log('显示');
    }
  });
}
